<template>
  <div id="app">
    <router-view v-if="!isLogin"></router-view>
    <el-container v-else style="height: 100vh;">
      <el-aside width="200px">
        <div class="system-title">XX管理系统</div>
        <el-menu 
          :default-active="activeIndex" 
          mode="vertical" 
          @select="handleSelect"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#409EFF">
          <el-submenu v-for="item in menuList" :key="item.id" :index="item.id + ''">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.id" :index="child.path">
              {{ child.title }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="background-color: #fff; border-bottom: 1px solid #e6e6e6;">
          <div class="header-content">
            <div class="welcome-text">欢迎，{{ userRole === 'admin' ? '管理员' : '用户' }}</div>
            <el-button type="text" @click="handleLogout" class="logout-btn">
              <i class="el-icon-switch-button"></i> 退出登录
            </el-button>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/welcome',
      menuList: []
    };
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin;
    },
    userRole() {
      return this.$store.getters.userRole;
    }
  },
  created() {
    // 确保在应用初始化时检查登录状态并加载菜单
    if (this.isLogin && this.userRole) {
      this.loadMenuByRole(this.userRole);
    }
  },
  watch: {
    userRole(newRole) {
      if (newRole) {
        this.loadMenuByRole(newRole);
      }
    }
  },
  methods: {
    loadMenuByRole(role) {
      if (role === 'admin') {
        this.menuList = [
          {
            id: 1,
            title: '系统管理',
            icon: 'el-icon-s-management',
            children: [
              {id: 11, title: '用户管理', path: '/user'},
              {id: 12, title: '权限管理', path: '/permission'},
              {id: 13, title: '表格数据', path: '/table-data'}
            ]
          }
        ];
      } else {
        this.menuList = [
          {
            id: 2,
            title: '普通功能',
            icon: 'el-icon-s-opportunity',
            children: [
              {id: 21, title: '欢迎页', path: '/welcome'}
            ]
          }
        ];
      }
    },
    handleSelect(path) {
      this.activeIndex = path;
      this.$router.push(path);
    },
    handleLogout() {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('logout');
        this.$router.push('/login');
        this.$message.success('已退出登录');
      }).catch(() => {
        this.$message.info('已取消退出');
      });
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}

.el-aside {
  background-color: #001529;
  color: white;
  overflow: hidden;
}

.system-title {
  height: 60px;
  line-height: 60px;
  background-color: #002140;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.el-menu {
  border-right: none;
}

.el-header {
  padding: 0 20px;
  height: 60px !important;
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.welcome-text {
  font-size: 14px;
  margin-right: 15px;
}

.logout-btn {
  color: #606266;
  font-size: 14px;
}

.logout-btn:hover {
  color: #409EFF;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}
</style>